<template>
  <div class="cell-item">
    <div
      class="wrapper"
      @mousedown="handleMouseDown"
      @mousemove="handleMouseMove"
      @mouseup="handleMouseUp"
      ref="box"
    >
      <div class="inner">
        <div class="content">{{ content }}</div>
        <div class="tip">值日表(2✖1)</div>
      </div>
    </div>
  </div>
</template>
<script>
import { setPostion } from "../common/utils.js";
import commonOption from "../mixin";
export default {
  // 2*1的内容块
  name: "Content2times1",

  mixins: [commonOption],
  methods: {
    // ------------ 事件处理函数 ------------------------
    // 鼠标按下
    handleMouseDown(e) {
      this.isPress = true;
      this.target = e.currentTarget;

      // 拖动元素的宽度和高度 width+padding+border
      this.cellW = this.target.offsetWidth;
      this.cellH = this.target.offsetHeight;

      // 当前点击元素的左顶点，在屏幕中的位置
      this.cellX = this.target.offsetLeft;
      this.cellY = this.target.offsetTop;

      // 鼠标电击时的位置
      this.startX = e.clientX;
      this.startY = e.clientY;

      // 计算点击的位置在子元素中的位置 这是固定的
      this.mouseX = this.startX - this.cellX;
      this.mouseY = this.startY - this.cellY;
      this.target.style.width = this.target.offsetWidth + "px";
      this.target.style.height = this.target.offsetHeight + "px";

      this.target.style.position = "fixed";
      this.target.style.zIndex = "9";
      this.target.style.transition = "";
      // 按下时，移除掉done
      this.target.classList.remove("done");
      // console.log(this.mouseX);
      setPostion(this.target, [this.cellX, this.cellY]);

      // 点击的时候应该判断，是否是从右侧空白格子拖动的
      // 如果是就删除原本在空块中的信息
      let index = -1;
      for (let i = 0; i < this.emptyCellsPos.length; i++) {
        if (this.fillResArr[i] !== undefined) {
          let { startX, startY } = this.emptyCellsPos[i];
          if (startX === this.cellX && startY == this.cellY) {
            index = i;
            this.setDragStyle(this.target, this.mouseY);
            break;
          }
        }
      }
      if (index !== -1) {
        // 说明当前拖动的位置是从右边的空白区拖动的，而且下面有块，
        this.$store.commit("updateFillResArr", {
          index: [index, index + 4],
          data: undefined,
        });
      }
    },

    // 鼠标移动
    handleMouseMove(e) {
      e.preventDefault();
      if (!this.isPress) {
        return;
      }
      // ---------------------------------------------
      document.onmousemove = (ev) => {
        // 必须是按压状态、move事件触发的元素与down事件触发的元素还要一致
        if (!this.isPress) {
          return;
        }
        const moveX = ev.clientX,
          moveY = ev.clientY;

        // 计算元素在屏幕中正确的位置，设置到top、left上
        this.cellX = moveX - this.mouseX;
        this.cellY = moveY - this.mouseY;

        this.screenX = ev.screenX;
        this.screenY = ev.screenY;

        // 设置正确的位置
        setPostion(this.target, [this.cellX, this.cellY]);
      };
      // ---------------------------------------------

      for (let i = 0; i < this.emptyCellsPos.length; i++) {
        let { startX, startY, el: emptyEl } = this.emptyCellsPos[i]; // 空白块的左上角，在屏幕中的位置

        if (
          this.screenX > startX &&
          this.screenX < startX + this.cellW &&
          this.screenY > startY &&
          this.screenY - 120 < startY + this.cellH
        ) {
          // 遍历右侧的空白块
          for (let i = 0; i < this.emptyCellsPos.length; i++) {
            this.emptyCellsPos[i].el.childNodes[0].style.backgroundColor = "";
          }
          // 满足条件设置底部的交互效果
          if (
            !this.fillResArr[i] &&
            !this.fillResArr[i + 4] &&
            ![8, 9, 10, 11].includes(i)
          ) {
            emptyEl.childNodes[0].style.backgroundColor = "#dbfce6";
            this.emptyCellsPos[i + 4].el.childNodes[0].style.backgroundColor =
              "#dbfce6";
          }
          this.useableIndex = i;
          break;
        } else {
          this.useableIndex = -1;
        }
      }
    },

    // 鼠标抬起
    handleMouseUp(e) {
      if (!this.isPress) {
        return;
      }

      const index = this.useableIndex;

      // 【2*1】的块比较的特殊，应该判断后一个还有没有空，
      if (
        index !== -1 &&
        !this.fillResArr[index] &&
        !(this.fillResArr[index + 4] || [8, 9, 10, 11].includes(index))
      ) {
        let { el: emptyEl } = this.emptyCellsPos[index]; // 空白块的左上角，在屏幕中的位置

        emptyEl.childNodes[0].appendChild(this.target);
        this.target.classList.add("done");
        this.target.style.height = 346 + "px";

        // 内容块填入成功，修改记录，表明当前的子块不再空白，已被元素占有！
        this.$store.commit("updateFillResArr", {
          index: [index, index + 4],
          data: {
            char: this.target.innerHTML,
            el: this.target,
          },
        });
      } else {
        // -------- 位置不满足时回到原来的位置 ---------
        this.originPos.parentElement.appendChild(this.target);
        this.target.classList.remove("done");
        this.target.style.width = "";
        this.target.style.height = "";
      }

      this.clearStyle();
    },

    clearStyle() {
      this.target.style.zIndex = "auto"; // 恢复默认的层级

      this.target.classList.remove("drag");
      this.target.style.padding = "";

      this.target.style.position = "relative";
      this.target.style.left = "";
      this.target.style.top = "";
      this.target.style.zIndex = "";

      for (let i = 0; i < this.emptyCellsPos.length; i++) {
        this.emptyCellsPos[i].el.childNodes[0].style.backgroundColor = "";
      }

      this.target = null;
      this.isPress = false;
    },
    setDragStyle(el, mouseY) {
      let bottom = 0,
        top = 0;
      if (mouseY <= 110) {
        bottom = 176;
      } else if (mouseY < 220 && mouseY > 110) {
        top = mouseY - 80;
        bottom = 176 - mouseY + 80;
      } else if (mouseY < 260) {
        bottom = top = 176 / 2;
      } else {
        top = 176;
      }
      el.style.paddingTop = top + "px";
      el.style.paddingBottom = bottom + "px";
      el.classList.add("drag");
    },
  },
};
</script>
<style scoped>
.wrapper {
  background-color: pink;
}
.drag {
  padding: 86px 0px;
  box-sizing: border-box;
  background-color: transparent;
}
.drag .inner {
  background-color: turquoise;
}
.drag .content {
  line-height: 100px;
  padding: 0 10px;
  font-size: 26px;
  font-weight: 700;
  background-color: aquamarine;
}
.drag .tip {
  display: inline-block;
}
</style>